
<template>
  <!-- 微信、企业微信 type1，2 -->
  <div class="contain" v-if="$route.query.type != 3">
    <div class="flex aic">
      <el-avatar :size="100" :src="customer.avatar"></el-avatar>
      <div class="info-wrap">
        <div class="mb10">
          {{ customer.name }}
          <span
            :style="{ color: customer.type == 1 ? '#4bde03' : '#f9a90b' }"
            >{{ { 1: "@微信", 2: "@企业微信" }[customer.type] }}</span
          >
          <i
            :class="[
              'el-icon-s-custom',
              { 1: 'man', 2: 'woman' }[customer.gender],
            ]"
          ></i>
        </div>
        <div class="info">
          出生日期：{{ customer.birthday || "--" }}
          <div class="bfc-d ml20">
            <el-date-picker
              v-if="datePickerVisible"
              v-model="birthday"
              type="date"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              placeholder="选择日期便于以后客情维护"
              @blur="datePickerVisible = false"
              @change="updateBirthday"
            ></el-date-picker>
            <i
              v-else
              v-hasPermi="['customerManage:customer:edit']"
              class="el-icon-edit"
              @click="datePickerVisible = true"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <el-card
      v-for="(item, index) of customer.weFlowerCustomerRels"
      :key="index"
      shadow="never"
      :body-style="{ width: '400px' }"
    >
      <el-button
        v-if="item.status == 1"
        class="fr"
        type="danger"
        plain
        size="mini"
        >该员工已被客户删除</el-button
      >
      <el-row :gutter="10">
        <el-col :span="10">备注名：</el-col>
        <el-col :span="10">
          <el-tooltip
            class="item"
            effect="dark"
            :content="remark(item)"
            placement="top-start"
          >
            <div class="toe al">
              {{ remark(item) }}
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">标签：</el-col>
        <el-col :span="14">
          <el-tag
            type="info"
            v-for="(unit, unique) in item.weFlowerCustomerTagRels"
            :key="unique"
            >{{ unit.tagName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">个人标签：</el-col>
        <el-col :span="12">{{ "--" }}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="10">
        <el-col :span="10">添加人：</el-col>
        <el-col :span="12">{{ item.userName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">所在部门：</el-col>
        <el-col :span="12">{{ item.department }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">添加时间：</el-col>
        <el-col :span="12">{{ item.createTime }}</el-col>
      </el-row>
    </el-card>
  </div>
  <!-- 小程序 -->
  <div class="contain" v-else>
    <div class="header">
      <div class="flex aic">
        <el-avatar :size="100" :src="wxuserInfo.headPortrait"></el-avatar>
        <div class="info-wrap">
          <div class="mb10">
            <span>{{ wxuserInfo.remarkName }}</span>
            <span :style="{ color: '#46a6ff' }"> @小程序</span>
            <!-- <span :style="{ color: '#46a6ff' }">编辑</span> -->
          </div>
          <div class="info">
            微信手机号：{{ wxuserInfo.phone ? wxuserInfo.phone : '未填写'}}
          </div>
          <div class="info_menu">
            <el-button class="btn" type="text" size="mini" @click="editFormShow = true">编辑</el-button>
          </div>  
        </div>
      </div>
    </div>
    <el-card shadow="never" :body-style="{ width: '400px' }">
      <el-row :gutter="10" v-if="wxuserInfo.region">
        <el-col :span="10">地区：</el-col>
        <el-col :span="30">{{wxuserInfo.region}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.source">
        <el-col :span="10">来源：</el-col>
        <el-col :span="30">@{{wxuserInfo.source}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.createTime">
        <el-col :span="10">创建日期：</el-col>
        <el-col :span="30">{{wxuserInfo.createTime}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.age">
        <el-col :span="10">年龄：</el-col>
        <el-col :span="30">{{wxuserInfo.age}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.sex">
        <el-col :span="10">性别：</el-col>
        <el-col :span="30">{{wxuserInfo.sex == 1 ? '男' : '女'}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.contactPhone">
        <el-col :span="10">联系电话：</el-col>
        <el-col :span="30">{{wxuserInfo.contactPhone}}</el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="10" v-if="wxuserInfo.clientState">
        <el-col :span="10">客户状态：</el-col>
        <el-col :span="30">{{wxuserInfo.clientState}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.significance">
        <el-col :span="10">重要程度：</el-col>
        <el-col :span="30">{{wxuserInfo.significance}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.company">
        <el-col :span="10">公司：</el-col>
        <el-col :span="30">{{wxuserInfo.company}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.contactRegion">
        <el-col :span="10">联系地址：</el-col>
        <el-col :span="30">{{wxuserInfo.contactRegion}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.remarkName">
        <el-col :span="10">备注名：</el-col>
        <el-col :span="30">{{wxuserInfo.remarkName}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.renark">
        <el-col :span="10">备注：</el-col>
        <el-col :span="30">{{wxuserInfo.renark}}</el-col>
      </el-row>
      <el-row :gutter="10" v-if="wxuserInfo.updateTime">
        <el-col :span="10">更新时间：</el-col>
        <el-col :span="30">{{wxuserInfo.updateTime}}</el-col>
      </el-row>
    </el-card>
    <!-- 编辑用户表单 -->
    <el-dialog title="编辑" :visible.sync="editFormShow">
      <el-form class="edit_form" :model="wxuserInfo" label-position="left">
        <el-form-item label="公司">
          <el-input class="input" v-model="wxuserInfo.company" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input class="input" v-model="wxuserInfo.contactPhone" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="客户资产">
          <el-input class="input" v-model="wxuserInfo.clientAsset" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="微信号">
          <el-input class="input" v-model="wxuserInfo.wechat" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="备注">
          <el-input class="input" v-model="wxuserInfo.renark" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input class="input" v-model="wxuserInfo.contactRegion" placeholder="请输入" clearable  />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { updateBirthday, getDetail } from '@/api/customer'
/**
 * 统一api管理
 * Eugene Hong
 */
import { getUserInfo,editUserInfo } from "@/api/eh-api"; 

export default {
  // name: 'CustomerDetail',
  data() {
    return {
      datePickerVisible: false,
      customer: {
        weFlowerCustomerRels: [{}],
      },
      birthday: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      //小程序用户数据
      wxuserInfo: {},
      editFormShow:false,
    }
  },
  created() {
    if( this.$route.query.type == 3 ){
      this.getUserInfo()
    }else{
      this.getDetail()
    }
  },
  methods: {
    /**
     * 更新出生日期
     */
    updateBirthday() {
      if (!this.birthday || this.birthday == this.customer.birthday) {
        return
      }
      let data = {
        externalUserid: this.customer.externalUserid,
        birthday: this.birthday,
      }
      updateBirthday(data).then((response) => {
        this.msgSuccess('操作成功')
        this.getDetail()
        this.datePickerVisible = false
      })
    },
    /**
     * 获取用户信息 type:3 小程序
     */
    getUserInfo(){
      getUserInfo({
        userId: this.$route.query.id
      }).then( res => {
          if( res.code == 200 ){
            this.wxuserInfo = res.data
          }
      })
    },
    /**
     * 编辑表单提交
     */
    submit:function(params) {
      console.log(this.wxuserInfo)
      editUserInfo(this.wxuserInfo).then( res => {
        if( res.code == 200 ){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.editFormShow = false
          this.getUserInfo()
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    /**
     * 获取用户信息 type：1，2 微信及企业微信
     */
    getDetail() {
      getDetail(this.$route.query.id).then(({ data }) => {
        this.customer = data[0]
        this.birthday = this.customer.birthday
      })
    },
    remark(item) {
      return (
        item.remark ||
        this.customer.name +
          (item.remarkCorpName ? '-' + item.remarkCorpName : '')
      )
    },
  },
}
</script>


<style lang="scss" scoped>
.mid-action {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  align-items: center;
  .total {
    background-color: rgba(65, 133, 244, 0.1);
    border: 1px solid rgba(65, 133, 244, 0.2);
    border-radius: 3px;
    font-size: 14px;
    min-height: 32px;
    line-height: 32px;
    padding: 0 12px;
    color: #606266;
  }
  .num {
    color: #00f;
  }
}

.info-wrap {
  margin-left: 20px;
  .info {
    color: #aaa;
    line-height: 32px;
  }
}

.el-card {
  display: inline-block;
  margin: 20px 20px 0 0;
  .el-row {
    color: #666;
    margin-bottom: 10px;
  }
  .el-col-10 {
    width: 100px;
    text-align: right;
  }
  .el-tag {
    margin-bottom: 5px;
  }
}
.el-icon-s-custom {
  font-size: 16px;
  margin-left: 4px;
  color: #999;
  &.man {
    color: #13a2e8;
  }
  &.woman {
    color: #f753b2;
  }
}
</style>
